<template>
	<div class="login-cont">
		<h1 ></h1>
		<ul>
			<li tabindex="-1">
				<i class="icon name"></i>
				<input :value="forms.phone" v-on:input="formsChange('phone')" ref="phone" type="text" placeholder="用户名/手机号" />
				<span :class="[clears['phone']?'active':'','clear']" @click.stop="clear('phone')"></span>
			</li>
			<li tabindex="-1">
				<i class="icon password"></i>
				<input :value="forms.password" v-on:input="formsChange('password')" ref="password" type="password" placeholder="密码" />
				<span :class="[clears['password']?'active':'','clear']" @click.stop="clear('password')"></span>
			</li>
			<button @click="login" :class="btnBan?'ban':''"> 登录 </button>
		</ul>
		<footer>
			<router-link to="getpassword">忘记密码</router-link>
			<b>|</b>
			<router-link to="register">快速注册</router-link>
		</footer>
    </div>
</template>

<script>
	import http from '../services/http';

	export default {
		name: 'login',
    	data:function(){
    		return{
    			btnBan:true,
    			forms:{},
    			clears:{}
    		}
    	},
    	props:['toast'],
    	mounted(){
    		sessionStorage.setItem("token",'');
    	},
    	methods:{
    		login(){
				const {toast, btnBan, forms, $router} = this;
				if(btnBan)return false;
				http.post('http://10.0.66.113:8080/security/api/v1/public/auth/token',{
				    "password":forms.password,
				    "rememberMe":false,
				    "username":forms.phone
				},data => {
					if(data.success){
						data.data.info.account = forms.phone;
						sessionStorage.setItem("token",'Bearer '+data.data.access_token);
						sessionStorage.setItem("userinfo",JSON.stringify({
							...data.data.info,
							myusertype:data.data.scope[0]
						}));
						this.$store.commit({ type: 'getLocalUser' });
						$router.push({ path: '/home' });
					}else{
						toast(data.message||'登录失败');
					}
				});
    		},
    		getStatus(status){
    			this.pwdStatus = status;
    		},
    		checkBtn(){
    			const {phone, password} = this.forms;
    			if(phone && password){
    				this.btnBan = false;
    			}else{
    				this.btnBan = true;
    			}
    		},
    		formsChange(key){
    			const cur = this.$refs[key].value;
    			this.forms[key] = cur;
    			this.clears[key] = cur.length>0 ? true : false;
    			this.forms = {...this.forms};
    			this.clears = {...this.clears};
    			this.checkBtn();
    		},
    		clear(key){
    			this.forms[key] = '';
    			this.clears[key] = false;
    			this.forms = {...this.forms};
    			this.clears = {...this.clears};
    			this.checkBtn();
    		},
    	}
    };
</script>

<style lang="scss">
.login-cont{
	width: 100%;
	padding: 0 65px;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	background: #ffffff;
	font-size: 1rem;
}
.login-cont h1{
	margin-top: 10px;
	height: 220px;
	width: 100%;
	background: transparent url("../assets/img/icon/logo.png") no-repeat center / auto 110px;
}

.login-cont li{
	position: relative;
	height: 41px;
	margin-bottom: 15px;
	padding: 10px 26px 10px 30px;
	border-bottom: solid 1px #e6e6e6;
}
.login-cont li .icon{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 30px;
}
.login-cont li .name{
	background: transparent url(../assets/img/icon/login-name.png) no-repeat center / auto 20px;
}
.login-cont li .password{
	background: transparent url(../assets/img/icon/login-password.png) no-repeat center / auto 20px;
}
.login-cont li input{
	width: 100%;
	border: none;
	height: 100%;
	background: #ffffff;
	line-height: 20px;
	font-size: 1rem;
}
.login-cont li:focus{
	border-bottom: solid 1px #2dbe60;
}
.login-cont li .clear{
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 26px;
	background: transparent url(../assets/img/icon/input-clear.png) no-repeat center / auto 11px;
}
.login-cont li .clear.active{
	display: block;
}
.login-cont button{
	font-size: 1rem;
	text-align: center;
	line-height: 40px;
	height: 40px;
	width: 100%;
	background: #2dbe60;
	border-radius: 4px;
	color: #ffffff;
	margin-top: 15px;
}
.login-cont button.ban{
	background: #e6e6e6;
}
.login-cont footer{
	margin-top: 150px;
	color: #cccccc;
	text-align: center;
	line-height: 20px;
}
.login-cont footer a{
	color: #cccccc;
}
.login-cont footer b{
	padding: 0 15px;
}







</style>
